<template>
    <div style="height:100%;">
      <div style='text-align:center;clear:both;height:100%'>
        <el-table
          v-loading="loading"
          :data="filterFormFro.tableData" 
          :border="true" 
          highlight-current-row
          @row-dblclick="doubleClick"
          :row-class-name="tableRowClassName"
          :header-cell-class-name = "tableHeaderClassName">
            <el-table-column prop="index" label="序号" min-width=10%>
            </el-table-column>
            <el-table-column prop="placeName" label="商家名称" sortable min-width=30%>
            </el-table-column>
            <el-table-column prop="businessAddress" label="商家地址" sortable min-width=30%>
            </el-table-column>
        </el-table>
      </div>
      <div class="pagination" style="text-align:center" v-show="paginationVisible">
        <el-pagination
          @current-change="handleCurrentChange"
          background
          :current-page="filterFormTo.currentPage"
          :page-size="15"
          layout="total, prev, pager, next"
          :page-count="filterFormFro.totalPage">
        </el-pagination>
      </div>
    </div>
</template>
<style scoped>
 .el-table .headerClass {
    background: #f0f9eb;
    text-align: center
  }
  .el-table .rowClass {
   height: 30px;
   background: oldlace;
  }
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .el-table__body, .el-table__footer, .el-table__header {
  table-layout: auto !important;
  }
  .el-table__body-wrapper, .el-table__footer-wrapper, .el-table__header-wrapper{
  width: 101%;
  }
</style>
<script>
import apiBus from '../../api/businessPlat/apiBus.js'
import '../../../static/css/businessPlat/common.css'
export default {
  name: 'SelectBusiness',
  props: ['airportId'],
  created () {
    // this.getBusinessListFro()
  },
  data () {
    return {
      pageType: '', // 父页面类型“add”或者“edit”
      testData: [],
      pointVisible: false, // 后台请求数据提示是否显示
      Note: '', // 后台请求数据提示
      loading: false, // 表格数据加载框
      noteVisible: false,
      paginationVisible: false,
      formLabelWidth: '30%',
      addForm: {
        name: '',
        number: '',
        index: 0
      },
      filterFormTo: {
        currentPage: 1, // 当前页数
        terminalId: '',
        airportId: ''
      },
      filterFormFro: {
        tableData: [],
        filterFormFro: ''
      }
    }
  },
  methods: {
    // 分页页面跳转时
    handleCurrentChange (val) {
      this.filterFormTo.currentPage = val
      this.getBusinessListFro()
    },
    doubleClick (row, event) {
      let rowIndex = parseInt(row.index) - 15 * (parseInt(this.filterFormTo.currentPage) - 1) - 1
      let para = {
        'type': this.pageType,
        'row': row,
        'id': this.filterFormFro.tableData[rowIndex].placeId
      }
      this.$emit('close-event')
      this.$emit('set-id', para)
    },
    // 获得父页面的类型“add或者edit”
    setPageType (formType, airportId, terminalId) {
      this.pageType = formType
      this.filterFormTo.airportId = airportId
      this.filterFormTo.terminalId = terminalId
      this.getBusinessListFro()
    },
    /** 提交后台相关函数 */
    // 从后台获取商家列表
    getBusinessListFro () {
      this.loading = true
      let para = {
        header: JSON.stringify({
          token: sessionStorage.getItem('token')
        }),
        body: JSON.stringify({
          pageNum: parseInt(this.filterFormTo.currentPage),
          airportId: parseInt(this.filterFormTo.airportId),
          terminalId: parseInt(this.filterFormTo.terminalId),
          placeName: ''
        })
      }
      this.filterFormFro.tableData = []
      apiBus.getBusinessList(para).then(res => {
        this.loading = false
        if (res.data.body.result === 1000) {
          let resData = res.data.body.content
          if (resData.list.length > 0) {
            this.filterFormFro.tableData = resData.list
            for (let i = 0; i < resData.list.length; i++) {
              this.filterFormFro.tableData[i].index = (parseInt(this.filterFormTo.currentPage) - 1) * 15 + i + 1
              this.filterFormFro.tableData[i].businessAddress = resData.list[i].address
            }
            this.filterFormFro.totalPage = resData.allPage
            this.filterFormFro.totalPage < 2 ? this.paginationVisible = false : this.paginationVisible = true
          } else {
            this.$message.success('没有任何商家信息！')
            this.paginationVisible = false
          }
        } else {
          this.$message.error(res.data.body.resultDesp)
          this.paginationVisible = false
        }
      })
      .catch(error => {
        this.loading = false
        this.$message.error(error)
      })
    },
    tableHeaderClassName ({row, column, rowIndex, columnIndex}) {
      if (rowIndex === 0) {
        return 'headerClass'
      }
    },
    tableRowClassName ({row, rowIndex}) {
      return 'rowClass'
    }
  }
}
</script>